<!--
  Generated template for the CollectionPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="light">
     <!-- <ion-buttons start>
      <button ion-button (click)="dismissCLI()">
        <img src="assets/img/back.png">
      </button>
    </ion-buttons>  -->
    <ion-title *ngIf="!search">
      
      
    
   <button class="Upout" (click)='GoUlli()'>{{Upout}}<img src="assets/img/drop-down@2x.png" alt="" srcset=""></button> 
 
    </ion-title>
    
    <ion-buttons end style="text-align: right;" *ngIf="!search">
      <button ion-button (click)="activationCLI()" *ngIf="activation == false">管理</button>
      <button ion-button (click)="activationokCLI()" *ngIf="activation == true">完成</button>
      <button ion-button (click)="searchby()">
        <ion-icon name="ios-search-outline"></ion-icon>
      </button>
      <button ion-button (click)="IssueImgadd()">
        <ion-icon name="md-add"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons style="text-align: right;" *ngIf="search">
      <ion-searchbar [(ngModel)]="content" (ionChange)="change()" (ionBlur)="back()"></ion-searchbar>
      <button ion-button>搜索</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content padding (click)="back()">

    <div class="uli" *ngIf='UpoutShow'>
        <ul ><li *ngFor='let val of Ulli,let i=index' (click)="ShowVal(i);" class="B_Bottom" [ngClass]="{'colorred':Li_index==i}">{{val}}<img src="assets/img/xuanzhong@2x.png" alt="" srcset="" [ngClass]="{'Imgshow':Li_index==i}"></li></ul>
     <div class="mc" (click)='GoUlli()'></div>
      </div>

  <ion-grid>
    
    <!-- 有内容 -->
    <div *ngFor="let item of collectionlist,let i=index" #ionDiv>
    <div class="timesacep" *ngIf="item.time">{{item.time}}</div>
      <ion-row>
        <ion-col col-4 class="mycollpid"  *ngFor="let listitem of item['data'],let j=index" style="flex-wrap: wrap">    
          <div class="mypicture">
            <img src="{{picrooturl}}{{listitem.service_middle_url}}" width="100%" height="100%" alt="图片内容" (click)="activation?selectCLI(i,j):detaligoodCLI(i,j)">
            <img src="{{listitem.selectimg}}" class="imgcoll" alt="删除" *ngIf="activation == true" (click)="selectCLI(i,j)">
           
            <img src="assets/img/Comment/shangjia@2x.png" alt="上架" srcset="" class="Upshop" *ngIf='listitem.on_sale==0||listitem.on_sale==-2;' (click)='Upshop(i,j)'>
            <img src="assets/img/xiajia@2x.png" alt="下架" srcset="" class="Upshop" *ngIf='listitem.on_sale==1' (click)='Outshop(i,j)'>
            <img src="assets/img/more.png" class="imgmore" alt="更多" (click)="moreCLI(i,j,listitem)" *ngIf="activation == false">
            <img src="assets/img/meijiashidaikuan@2x.png" class="Timeimg" *ngIf="collectionlist[i]['data'][j]['is_buy'] == 2" alt="" srcset="">
             <img src="assets/img/goumai.png" class="goumai" alt="已购买" *ngIf="collectionlist[i]['data'][j]['is_buy'] == 1"> 
            <!-- <span class="Time" *ngIf='listitem.expiry_time!=0'>有效期：{{listitem.expiry_time}}天</span>
            <span class="Time" [ngClass]="{'letOt':listitem.expiry_time==0}" *ngIf='listitem.expiry_time==0'>续期</span> -->
            <!-- <img src="assets/img/more.png" class="imgmore" alt="更多" (click)="moreCLI(i,j)" *ngIf="activation == false"> -->
           </div>
          <span class="collection" style="width: 100%;"><span>{{listitem.service_name}}</span><span>{{listitem.service_price}}</span></span>
        </ion-col>
     
      </ion-row>
    </div>
    


    <ion-footer *ngIf="activation==true">
      <div class="footer-bar">
        <div class="footer-bar-left" (click)="activation?selectall():null">
            <span *ngIf="selectallflag == false"><img src="assets/img/selectno1.png" class="selectall" /> 全选</span>
            <span *ngIf="selectallflag == true"><img src="assets/img/selectok.png" class="selectall" /> 取消选择</span>
        </div>
        <div class="footer-bar-right" (click)="delallNailAPI()">删除</div>
      </div>
    </ion-footer>


    <!-- 无内容 -->
    <div class="contentwrap wrap1" *ngIf="flag1">
      <div style="position:relative">
        <p>网络好像出问题了</p>
        <div class="wrap">
          <button ion-button round class="load" outline (click)="reload()">刷新试试</button>
        </div>
      </div>
    </div>
    <!-- 无内容 -->
    <div class="contentwrap wrap2" *ngIf="flag2">
      <div style="position:relative">
        <p>还没有收藏哦</p>
        <div class="wrap">
          <button ion-button round class="load" outline (click)="home()">去首页逛逛</button>
        </div>
      </div>
    </div>


  </ion-grid>
</ion-content>